<template>
<div class="page">
  <div class="header">
    <div class="left">
      <img src="https://tva1.sinaimg.cn/large/0081Kckwly1gjz2d3j31oj304803qjrb.jpg">
      <span>邹燕艳</span>
      <div v-if="time">{{time}}</div>
    </div>
    <div class="mid">
      <div class="title">生产看板</div>
      <div class="background">
        <img src="@/assets/images/title-header.png" alt="">
      </div>
    </div>
    <div class="right">
      <div class="tools-show">
        <div class="show-item">
          车间:全部
        </div>
        <div class="show-item ">
          产品:低压电气柜
        </div>
      </div>
      <div class="tools-setting">
        <div class="setting-item">
          <Icon type="md-search" size="20" />
        </div>
        <div class="setting-item">
          <Icon type="md-settings" size="20" />
        </div>
      </div>
    </div>
  </div>
  <div class="panel">
    <div class="main">
      <div class="left-area">
        <div class="plan-table">
          <div class="plan border">
            <Left1/>
          </div>
          <div class="circles border">
            <Circles/>
          </div>
        </div>
        <div class="bar-draw border">
          <Left2/>
        </div>
      </div>
      <div class="right-area border">
          <Right1/>
      </div>
    </div>
    <div class="bottom-area">
      <div class="bottom-1 border">
          <WasteBar/>
      </div>
      <div class="bottom-2 border">
          <Bottom2/>
      </div>
      <div class="bottom-2 border">
          <Bottom3/>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import WasteBar from './components/bottom-1'
import Bottom2 from './components/bottom-2'
import Bottom3 from './components/bottom-3'
import Left2 from './components/left-2'
import Left1 from './components/left-1'
import Right1 from './components/right-1'
import Circles from './components/circles'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      time: ''
    }
  },
   components: {
     Circles,
     Left2,
     Right1,
     Left1,
    WasteBar,
    Bottom2,
    Bottom3
  },
  created() {
    this.timeRecorder()
  },
  methods: {
    timeRecorder() {
        let t = null;
        let that = this;
        t = setTimeout(time, 1000); //開始运行
        function time() {
          clearTimeout(t); //清除定时器
          that.time = dayjs().format("YYYY-MM-DD HH:mm:ss");
          t = setTimeout(time, 1000); //设定定时器，循环运行
        }
        this.$once()
      },
  }
}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}

.page {
  background: #00101D;
  min-height: 11rem;
  display: flex;
  flex-flow: column;
  .border {
    background: rgba(28, 185, 251, 0.1);
    border: 1px solid;
    border-image: linear-gradient(90deg, #1893FE, #19BEFF) 1 1;
    box-shadow: 0px 1px 1px 0px rgba(0, 37, 71, 0.75);
    margin: 5px;
  }

  .header {
    width: 100%;
    height: 1.25rem;
    display: flex;
    flex-flow: row nowrap;
    color: #6BBFFF;

    .left {
      flex: 2;
      color: #F7F8F9;
      display: flex;
      align-items: center;
      font-size: 16px;
      justify-content: space-around;

      img {
        width: 65px;
        border-radius: 50%;
      }
    }

    .right {
      flex: 2;
      font-size: 16px;
      display: flex;
      color: #F7F8F9;
      align-items: center;

      .tools-show {
        flex: 1;
        display: flex;
        flex-flow: column;
      }

      .tools-setting {
        flex: 1;
        display: flex;
        align-items: center;

        .setting-item {
          background: #2DA1FA;
          margin: 0 5px;
          padding: 5px;
          border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

    }

    .mid {
      flex: 6;

      .title {
        font-size: 22px;
        text-align: center;
        line-height: 1.15rem;
        margin: 0;
        margin-left: -25px;
      }

      .background {
        position: relative;
        top: -50%;

        img {
          width: 100%;
        }
      }
    }

  }

  .panel {
    min-width: 1024px;
    flex: 1;
    display: flex;
    flex-flow: column;

    .title-bg {
      background: url("../../assets/images/title-bg.png") no-repeat top center;
      background-size: 100% 100%;
      font-size: 16px;
      padding: 4px 10px;
      text-align: left;
      width: 160px;
      margin: 10px;
      color: #ffffff;
    }

    .main {
      height: 8.525rem;
      display: flex;
      overflow: hidden;

      .right-area {
        width: 47.92%;
        height: 100%;
      }

      .left-area {
        flex: 1;
        display: flex;
        flex-flow: column;

        .plan-table {
          flex: 1.5;
          display: flex;

          .plan {
            flex: 3;
          }

          .circles {
            flex: 2;
          }
        }

        .bar-draw {
          flex: 1;
        }
      }
    }

    .bottom-area {
      flex: 1;
      display: flex;
      justify-content: space-around;
      .bottom-1 {
        width: 21.67%;
      }

      .bottom-2 {
        width: 37.45%;
      }

      .bomttom-3 {
        flex: 1;
      }
    }

  }
}
</style>
